{*
SPDX-FileCopyrightText: © 2023 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ import "../../_libs/common" }}
{{ import "./common" }}

<turbo-frame id="bookmark-sidebar-{{ .Item.ID }}" disabled>
  {{- if len(.Item.Errors) -}}
    <details class="my-4">
      <summary class="text-sm bg-red-700 text-white inline-block p-0.5 rounded"
      >{{ yield icon(name="o-error") }} Errors occured during extraction</summary>
      <ul class="text-red-800">{{ range .Item.Errors }}
        <li class="mt-0.5">{{ . }}</li>
      {{ end }}</ul>
    </details>
  {{- end -}}

  <p class="hidden print:block mb-4 font-semibold text-primary-dark">{{ .Item.URL }}</p>

  <div class="print:flex print:gap-8">
    {{- if .Item.Type == "article" && isset(.Item.Resources.thumbnail) -}}
    <div class="mb-4">
      <span class="
        block relative overflow-hidden pt-16/9
        print:overflow-visible
        print:pt-0 print:static
      ">
        <img src="{{ .Item.Resources.thumbnail.Src }}" alt="" class="
          absolute top-0 h-full w-full object-cover object-center rounded
          print:w-52 print:h-auto print:static
          "
          width="{{ .Item.Resources.thumbnail.Width }}"
          height="{{ .Item.Resources.thumbnail.Height }}" />
      </span>
    </div>
    {{- end -}}

    <ul class="mb-4">
      <li class="flex items-center gap-1 mb-2">
      {{- if isset(.Item.Resources.icon) -}}
        <img class="inline w-5 h-auto"
        alt="" src="{{ .Item.Resources.icon.Src }}"
        width="{{ .Item.Resources.icon.Width }}"
        height="{{ .Item.Resources.icon.Height }}">
      {{- end -}}
      <strong class="overflow-hidden text-ellipsis" title="{{ default(.Item.SiteName, "no site name") }}"
       dir="{{ default(.Item.TextDirection, "ltr") }}">{{ default(.Item.SiteName, "no site name") }}</strong>
      </li>
      {{- if !empty(.Item.Published) -}}
        {{- yield line_icon(icon="o-calendar") content -}}
          Published on {{ date(.Item.Published, "02 January 2006") }}
        {{- end -}}
      {{- end -}}
      {{- if !empty(.Item.Authors) -}}
        {{- yield line_icon(icon="o-pen") content -}}
          By {{ join(.Item.Authors, ", ") }}
        {{- end -}}
      {{- end -}}
      {{- yield line_icon(icon="o-link") content -}}
        <a href="{{ .Item.URL }}" class="link" target="top">{{ .Item.Domain }}</a>
      {{- end -}}
      {{- if .Item.ReadingTime() > 0 -}}
        {{- yield line_icon(icon="o-clock") content -}}
          {{ .Item.ReadingTime() }}&nbsp;min
        {{- end -}}
      {{- end -}}
    </ul>

    <div class="hidden print:block ml-auto">
      <img src="{{ qrcode(.Item.URL, -2, `#1e485b`) }}" alt="" class="rounded">
    </div>
  </div>

  {{ include "./actions" .Item }}

  {* publicly share a bookmark *}
  <form id="share-form" action="{{ urlFor(`./share`) }}" method="post"
    class="hidden"
    data-controller="turbo-form"
    data-turbo-form-action-value="{{ urlFor(`/api/bookmarks`, .Item.ID, `share`) }}"
  >{{ yield csrfField() }}</form>
  <div class="print:hidden
    [&>turbo-frame:not(.hidden)]:block [&>turbo-frame]:my-4 [&>turbo-frame]:p-4
    [&>turbo-frame]:shadow-lg [&>turbo-frame]:bg-gray-100
    [&_p]:text-sm [&_img]:my-4 [&_img]:mx-auto [&_button]:w-full
  ">
    <turbo-frame id="bookmark-share-{{ .Item.ID }}" class="hidden"></turbo-frame>
  </div>

  <h3 class="mb-2 title text-lg {{ if len(.Item.Labels) == 0 }}print:hidden{{ end }}">{{- yield icon(name="o-label") }} Labels</h3>
  {{ include "./labels_form" .Item }}

  {{- if .Item.HasArticle -}}
    <div class="print:hidden">
      <h3 class="mb-2 title text-lg">{{- yield icon(name="o-highlight") }} Highlights</h3>
      <div class="group">
        {{- if len(.Item.Annotations) == 0 -}}
          <p class="mb-4">Start selecting text in the article to create a new highlight.</p>
        {{- else -}}
          <ul class="mb-4" data-controller="request scrollto">
          {{- range _, x := .Item.Annotations -}}
            <li class="
              mb-3 flex p-2 bg-hl-yellow bg-opacity-20 hfw:bg-opacity-80
              rounded border border-hl-yellow-dark
              group/btn">
              <a class="grow" href="#annotation-{{ x.ID }}" data-action="scrollto#scroll:prevent">{{ shortText(x.Text, 100) }}</a>
              <span class="no-js:hidden flex-shrink-0">
                <button class="block -mt-4 -mr-4
                text-gray-600 opacity-0
                group-hover/btn:opacity-100 group-focus-within/btn:opacity-100
                hf:text-red-700"
                data-action="click->request#fetch"
                data-request-url-param="{{ urlFor(`/api/bookmarks`, .Item.ID, `annotations`, x.ID) }}"
                data-request-method-param="delete"
                data-request-event-name-param="annotation-removed"
                >{{ yield icon(name="o-cross", class="", svgClass="h-5 w-5") }}</button>
              </span>
              </li>
          {{- end -}}
          </ul>
        {{- end -}}
      </div>
    </div>

    {{- if .Item.HasArticle && .Item.Links && .Item.Links.HasPages() -}}
      <details class="group mb-4 print:hidden">
        <summary class="block mb-2 title text-lg hf:text-primary-dark">
          {{- yield icon(name="o-link") }}
          <span class="underline decoration-dotted decoration-primary">Links</span>
        </summary>
        <ul class="mb-4 list-disc list-outside pl-4">
        {{- range _, x := .Item.Links.Pages() -}}
          <li class="list-item mb-1 leading-none">
            <a class="link text-sm" href="{{ x.URL }}" rel="nofollow noopener noreferrer" target="_blank"
            title="{{ default(x.Title, x.URL) }}">
              {{ default(shortText(x.Title, 80), shortURL(x.URL, 40)) }}
            </a>
          </li>
        {{- end -}}
        </ul>
      </details>
    {{- end -}}
  {{- end -}}
</turbo-frame>
